<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="button" value="浪起来" @click="lang">
      <input type="button" value="停止" @click="stop">
      <h4>{{msg}}</h4>
    </div>

    <script>
      // vm 实例中要访问内部的数据或方法需要用 this. 属性名或方法名来进行调用
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '猥琐发育,别浪~~!',
          intervalId: null // 在data上定义定时器id
        },
        methods: {
          lang(){
            if(this.intervalId != null) return;

            // 箭头函数中的this和外部的this保持一致,此时都是指向vm实例
            this.intervalId = setInterval(() => {
              // 获取到头的第一个字符
              var start = this.msg.substring(0,1);
              // 获取到后面的所有字符
              var end = this.msg.substring(1);
              // 重新拼接得到新的字符
              this.msg = end + start;
            },400)
          },
          stop(){ // 停止定时器
            clearInterval(this.intervalId);
            // 每当清除定时器之后,需要重新把 intervalId 置为null
            this.intervalId = null;
          }
        }
      })
    </script>

  </body>
</html>
